<template>
  <div>
    <el-menu
        id="nav"
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        text-color="#ccc">
    <el-menu-item index="/" @click="getdate">首页</el-menu-item>
    <el-submenu index="/swiper" >
      <template slot="title" >产品系列</template>
      <el-menu-item index="/swiper" @click="getswiper(0)">选项1</el-menu-item>
      <el-menu-item index="/swiper" @click="getswiper(1)">选项2</el-menu-item>
      <el-menu-item index="/swiper" @click="getswiper(2)">选项3</el-menu-item>
    </el-submenu>
    <el-submenu index="3" >
      <template slot="title">教育服务</template>
      <el-menu-item index="3-1">选项1</el-menu-item>
      <el-menu-item index="3-2">选项2</el-menu-item>
      <el-menu-item index="3-3">选项3</el-menu-item>
    </el-submenu>
    <el-menu-item index="5">技术服务</el-menu-item>
    <el-menu-item index="6">品牌合作</el-menu-item>
    <el-menu-item index="/about" @click="getdate">研究院</el-menu-item>
  </el-menu>
  <div class="line"></div>
  </div>
</template>

<script>

export default {
  name: "NavMenu",
  data() {
    return {
      activeIndex: '/',
      activeIndex2: '1',
    };
  },
  watch:{
    $route(){
      this.setCurrentRouter();
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    setCurrentRouter(){
      console.log(this.$route.path);
      this.activeIndex=this.$route.path;//
    },
    getdate(e){
      console.log(e.index)
      this.$router.push(e.index)
    },
    getswiper(num){
      this.$router.push({
        path:'/swiper',
        name: 'swiperview',
        params:{
          num: num
        }
      })
    }
  },
  created() {
    this.setCurrentRouter();
  }
}

</script>

<style scoped>
#nav{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  text-align: center;
  width:600px;
  margin: 0 auto;
  box-shadow: 0 15px 10px -15px #000000;
  border-radius: 25px;
  border: 2px solid #d7b59b;
}
.el-menu--horizontal > .el-submenu .el-submenu__title,
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title,
.el-submenu__title i {
  color: #fff;
}
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  border-bottom: 2px solid #ff8923;
  color: #fff;
}
/*//鼠标悬浮时，子菜单的样式*/
  .el-menu-item:hover {
    outline: 0 !important;
    color: #ff8923 !important;
    background: none !important;
  }
/*// 一级菜单选中的样式*/
   .el-menu-item.is-active{
     color: #ff8923 !important;
     border-bottom-color: transparent !important;
   }
/*// 二级菜单 选中的样式*/
   .el-menu--horizontal > .el-submenu.is-active .el-submenu__title{
     color: #ff8923 !important;
     border-bottom-color: transparent !important;
   }
/*//鼠标悬浮时，主菜单的样式*/
  .el-submenu__title:focus,
  .el-submenu__title:hover {
    outline: 0 !important;
    color: #fff !important;
    background: none !important;
  }
.el-menu--horizontal:focus,
.el-menu--horizontal:hover {
  outline: 0 !important;
  color: #fff !important;
  background: none !important;
}
.nav-menu-son .el-menu--horizontal:hover{
  background: pink!important;
}
.el-menu {
  background-color: none !important;
}
.el-menu-item a:hover {
  background: none;
}
.el-menu--popup-bottom-start {
  margin-top: -2px;
}
.el-menu--popup {
  background: none !important;
  padding: 0 0;
  min-width: 120px !important;
  line-height: 40px !important;
  box-shadow: 0 4px 8px 0 rgba(25,14,109,0.13);
  border-radius: 5px;
}
.el-menu--horizontal .el-menu {
  background: none;
}

.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
  background-color: rgba(255, 255, 255, 0.6);
  float: none;
  height: 36px;
  line-height: 36px;
  padding: 0 22px;
  color: #929292 !important;
  z-index: 100;
  font-weight: 500;
}
/*//二次菜单悬浮及背景样式*/
  .el-menu--popup-bottom-start .el-menu-item:hover{
    color: rgba(86,86,86,1) !important;
  }
.el-menu--popup-bottom-start .el-menu-item{
  background: #fff !important;
}
</style>